<template>
  <div class="tools-container">
    <!-- 顶部横幅 -->
    <div class="hero-banner">
      <div class="hero-content">
        <h1 class="hero-title">E特尔诺 API 工具箱</h1>
        <p class="hero-subtitle">专业的开发工具集，助力您的开发之旅</p>
        <div class="search-bar">
          <i class="fas fa-search search-icon"></i>
          <input 
            type="text" 
            v-model="searchQuery"
            placeholder="搜索工具..."
            @input="filterTools"
          >
        </div>
      </div>
      <div class="hero-background">
        <div class="animated-shapes">
          <div class="shape shape-1"></div>
          <div class="shape shape-2"></div>
          <div class="shape shape-3"></div>
        </div>
      </div>
    </div>

    <!-- 工具分类标签 -->
    <div class="category-tabs">
      <button 
        v-for="category in categories" 
        :key="category.id"
        :class="['category-tab', { active: currentCategory === category.id }]"
        @click="filterByCategory(category.id)"
      >
        <i :class="category.icon"></i>
        {{ category.name }}
      </button>
    </div>

    <!-- 工具展示区域 -->
    <div class="tools-grid">
      <div 
        v-for="tool in filteredTools" 
        :key="tool.id"
        class="tool-card"
        :class="{ 'new': tool.isNew, 'popular': tool.isPopular }"
        @click="navigateToTool(tool)"
      >
        <div class="tool-icon">
          <i :class="tool.icon"></i>
          <div class="status-badge" :class="getStatusClass(tool.status)">
            {{ getStatusText(tool.status) }}
          </div>
        </div>
        
        <div class="tool-info">
          <h3 class="tool-title">{{ tool.name }}</h3>
          <p class="tool-description">{{ tool.description }}</p>
          
          <div class="tool-meta">
            <span class="tool-stat">
              <i class="fas fa-users"></i>
              {{ formatNumber(tool.usageCount) }} 次使用
            </span>
            <span class="tool-stat">
              <i class="fas fa-star"></i>
              {{ tool.rating.toFixed(1) }}
            </span>
          </div>

          <div class="tool-tags">
            <span 
              v-for="tag in tool.tags" 
              :key="tag"
              class="tag"
            >{{ tag }}</span>
          </div>
        </div>

        <div class="tool-hover-info">
          <div class="hover-stats">
            <div class="stat-item">
              <span class="stat-label">更新时间</span>
              <span class="stat-value">{{ formatDate(tool.lastUpdate) }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">调用限制</span>
              <span class="stat-value">{{ tool.apiLimit }}/天</span>
            </div>
          </div>
          <button class="use-tool-btn">
            立即使用
            <i class="fas fa-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 新功能提示 -->
    <transition name="fade">
      <div v-if="showNotice" class="feature-notice">
        <div class="notice-content">
          <i class="fas fa-bell notice-icon"></i>
          <span>{{ latestNotice }}</span>
          <button class="close-notice" @click="closeNotice">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import axios from 'axios';
import { ref, onMounted } from 'vue';

export default {
  name: 'ApiTools',
  
  setup() {
    const searchQuery = ref('');
    const currentCategory = ref('all');
    const showNotice = ref(true);
    const tools = ref([]);
    const filteredTools = ref([]);
    const latestNotice = ref('');

    const categories = [
      { id: 'all', name: '全部工具', icon: 'fas fa-th-large' },
      { id: 'data', name: '数据处理', icon: 'fas fa-database' },
      { id: 'image', name: '图像处理', icon: 'fas fa-image' },
      { id: 'text', name: '文本工具', icon: 'fas fa-font' },
      { id: 'convert', name: '格式转换', icon: 'fas fa-exchange-alt' }
    ];

    const fetchTools = async () => {
      try {
        const response = await axios.get('/api/getAllTools');
        if (response.data.code === 200) {
          tools.value = response.data.data;
          filteredTools.value = tools.value;
        }
      } catch (error) {
        console.error('获取工具列表失败:', error);
      }
    };

    const fetchNotice = async () => {
      try {
        const response = await axios.get('/api/getNoticeCurrent');
        if (response.data.code === 200 && response.data.data.length > 0) {
          latestNotice.value = response.data.data[0].notice;
          showNotice.value = true;
        }
      } catch (error) {
        console.error('获取通知失败:', error);
      }
    };

    const filterTools = () => {
      filteredTools.value = tools.value.filter(tool => {
        const matchesSearch = tool.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                            tool.description.toLowerCase().includes(searchQuery.value.toLowerCase());
        const matchesCategory = currentCategory.value === 'all' || tool.category === currentCategory.value;
        return matchesSearch && matchesCategory;
      });
    };

    const filterByCategory = (category) => {
      currentCategory.value = category;
      filterTools();
    };

    const navigateToTool = (tool) => {
      window.location.href = tool.url;
    };

    const formatNumber = (num) => {
      return num > 1000 ? (num/1000).toFixed(1) + 'k' : num;
    };

    const formatDate = (date) => {
      return new Date(date).toLocaleDateString();
    };

    const getStatusClass = (status) => {
      return {
        1: 'status-active',
        2: 'status-maintenance',
        3: 'status-upcoming'
      }[status];
    };

    const getStatusText = (status) => {
      return {
        1: '运行中',
        2: '维护中',
        3: '即将上线'
      }[status];
    };

    const closeNotice = () => {
      showNotice.value = false;
    };

    onMounted(() => {
      document.title = 'E特尔诺-API工具箱';
      fetchTools();
      fetchNotice();
    });

    return {
      searchQuery,
      currentCategory,
      categories,
      filteredTools,
      showNotice,
      latestNotice,
      filterTools,
      filterByCategory,
      navigateToTool,
      formatNumber,
      formatDate,
      getStatusClass,
      getStatusText,
      closeNotice
    };
  }
};
</script>

<style scoped>
.tools-container {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 顶部横幅样式 */
.hero-banner {
  position: relative;
  height: 400px;
  background: linear-gradient(135deg, #1a237e, #0d47a1);
  overflow: hidden;
  padding: 2rem;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  color: white;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #fff, #e3f2fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.search-bar {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.search-bar input {
  width: 100%;
  padding: 1rem 3rem;
  border-radius: 50px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: white;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.search-bar input:focus {
  background: rgba(255, 255, 255, 0.2);
  outline: none;
}

.search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.search-icon {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
}

/* 动画背景 */
.animated-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 20s infinite linear;
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
}

.shape-2 {
  width: 200px;
  height: 200px;
  top: 50%;
  right: -100px;
  animation-delay: -5s;
}

.shape-3 {
  width: 150px;
  height: 150px;
  bottom: -75px;
  left: 50%;
  animation-delay: -10s;
}

/* 分类标签样式 */
.category-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  margin-top: -50px;
  position: relative;
  z-index: 3;
}

.category-tab {
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  border: none;
  background: white;
  color: #666;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.category-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.category-tab.active {
  background: #1a237e;
  color: white;
}

.category-tab i {
  margin-right: 0.5rem;
}

/* 工具卡片网格 */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.tool-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.tool-card.new::before {
  content: 'NEW';
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #2196f3;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.tool-card.popular::after {
  content: '热门';
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #f44336;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.tool-icon {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background: #e3f2fd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #1a237e;
  margin-bottom: 1rem;
}

.tool-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1a237e;
}

.tool-description {
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.tool-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tool-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.tool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  background: #e3f2fd;
  color: #1a237e;
  font-size: 0.8rem;
}

.tool-hover-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  padding: 1rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.tool-card:hover .tool-hover-info {
  transform: translateY(0);
}

.hover-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-label {
  font-size: 0.8rem;
  color: #666;
}

.stat-value {
  font-weight: 500;
  color: #1a237e;
}

.use-tool-btn {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  background: #1a237e;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.use-tool-btn:hover {
  background: #0d47a1;
}

/* 状态标签样式 */
.status-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-active {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.status-maintenance {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}

.status-upcoming {
  background: rgba(33, 150, 243, 0.1);
  color: #2196f3;
}

/* 新功能提示 */
.feature-notice {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 1rem 2rem;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 1000;
}

.notice-icon {
  color: #1a237e;
}

.close-notice {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.3s ease;
}

.close-notice:hover {
  color: #f44336;
}

/* 动画 */
@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(30px, 30px) rotate(180deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .hero-banner {
    height: 300px;
    padding: 1rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .category-tabs {
    flex-wrap: wrap;
    padding: 1rem;
  }

  .tools-grid {
    padding: 1rem;
    gap: 1rem;
  }
}
</style>
  